<template>
  <div class="recent-play">
    <van-nav-bar title="最近播放" />
    <div class="recent-content">
      <div class="recent-stats">
        <div class="stat-item">
          <div class="stat-number">{{ recentSongs.length }}</div>
          <div class="stat-label">最近播放</div>
        </div>
        <div class="stat-item">
          <div class="stat-number">{{ playTime }}</div>
          <div class="stat-label">播放时长</div>
        </div>
        <div class="stat-item">
          <div class="stat-number">{{ favoriteCount }}</div>
          <div class="stat-label">收藏歌曲</div>
        </div>
      </div>
      
      <div class="section-title">最近播放</div>
      <div class="song-list">
        <div class="song-item" v-for="(song, index) in recentSongs" :key="song.id">
          <div class="song-rank">{{ index + 1 }}</div>
          <img :src="song.cover" class="song-cover" />
          <div class="song-info">
            <div class="song-title">{{ song.title }}</div>
            <div class="song-artist">{{ song.artist }}</div>
            <div class="song-time">{{ song.playTime }}</div>
          </div>
          <van-icon name="play-circle-o" class="play-icon" />
        </div>
      </div>
      
      <div class="section-title">常听歌手</div>
      <div class="artist-list">
        <div class="artist-item" v-for="artist in topArtists" :key="artist.id">
          <img :src="artist.avatar" class="artist-avatar" />
          <div class="artist-name">{{ artist.name }}</div>
          <div class="artist-count">{{ artist.playCount }}次</div>
        </div>
      </div>
      
      <van-button type="primary" round icon="play" class="discover-btn">去发现好音乐</van-button>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'

const recentSongs = ref([
  { id: 1, title: '晴天', artist: '周杰伦', cover: 'https://img2.baidu.com/it/u=168590827,1280265529&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500', playTime: '2小时前' },
  { id: 2, title: '稻香', artist: '周杰伦', cover: 'https://img2.baidu.com/it/u=1858292141,3587727348&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500', playTime: '3小时前' },
  { id: 3, title: '青花瓷', artist: '周杰伦', cover: 'https://imge.kugou.com/stdmusic/20240427/20240427191301775727.jpg', playTime: '5小时前' },
  { id: 4, title: '七里香', artist: '周杰伦', cover: 'https://imge.kugou.com/stdmusic/20220507/20220507113657285312.jpg', playTime: '昨天' },
  { id: 5, title: '夜曲', artist: '周杰伦', cover: 'https://img1.baidu.com/it/u=4050763066,3874124631&fm=253&app=120&f=JPEG?w=1422&h=800', playTime: '昨天' },
  { id: 6, title: '发如雪', artist: '周杰伦', cover: 'https://img1.baidu.com/it/u=3575126618,2505183193&fm=253&app=138&f=JPEG?w=820&h=800', playTime: '2天前' },
  { id: 7, title: '东风破', artist: '周杰伦', cover: 'https://img0.baidu.com/it/u=3315620404,701141190&fm=253&app=138&f=JPEG?w=834&h=800', playTime: '2天前' },
  { id: 8, title: '菊花台', artist: '周杰伦', cover: 'https://img2.baidu.com/it/u=147936358,2816222157&fm=253&app=138&f=JPEG?w=813&h=800', playTime: '3天前' },
  { id: 9, title: '千里之外', artist: '周杰伦', cover: 'https://pic4.zhimg.com/v2-5b9de1d48ee943f3c8fde04035a58bd5_r.jpg', playTime: '3天前' },
  { id: 10, title: '听妈妈的话', artist: '周杰伦', cover: 'https://img2.baidu.com/it/u=1858292141,3587727348&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500', playTime: '4天前' }
])

const topArtists = ref([
  { id: 1, name: '周杰伦', avatar: 'https://img2.baidu.com/it/u=168590827,1280265529&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500', playCount: 156 },
  { id: 2, name: '毛不易', avatar: 'https://img2.baidu.com/it/u=1858292141,3587727348&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500', playCount: 89 },
  { id: 3, name: '薛之谦', avatar: 'https://imge.kugou.com/stdmusic/20240427/20240427191301775727.jpg', playCount: 67 },
  { id: 4, name: '朴树', avatar: 'https://imge.kugou.com/stdmusic/20220507/20220507113657285312.jpg', playCount: 45 },
  { id: 5, name: '买辣椒也用券', avatar: 'https://img1.baidu.com/it/u=4050763066,3874124631&fm=253&app=120&f=JPEG?w=1422&h=800', playCount: 32 }
])

const playTime = computed(() => '12小时')
const favoriteCount = computed(() => 25)
</script>

<style scoped>
.recent-play {
  min-height: 100vh;
  background: var(--van-background-color, #fff);
  color: var(--van-text-color, #222);
}
.recent-content {
  padding: 16px;
}
.recent-stats {
  display: flex;
  justify-content: space-around;
  margin-bottom: 24px;
  padding: 20px;
  background: #f8f8f8;
  border-radius: 12px;
}
.stat-item {
  text-align: center;
}
.stat-number {
  font-size: 24px;
  font-weight: bold;
  color: #f56c6c;
}
.stat-label {
  font-size: 12px;
  color: #888;
  margin-top: 4px;
}
.section-title {
  font-weight: bold;
  margin: 18px 0 8px 0;
  font-size: 15px;
}
.song-list {
  margin-bottom: 24px;
}
.song-item {
  display: flex;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid #f0f0f0;
}
.song-rank {
  width: 24px;
  text-align: center;
  font-weight: bold;
  color: #f56c6c;
  margin-right: 12px;
}
.song-cover {
  width: 40px;
  height: 40px;
  border-radius: 6px;
  margin-right: 12px;
}
.song-info {
  flex: 1;
}
.song-title {
  font-weight: bold;
  font-size: 14px;
}
.song-artist {
  color: #888;
  font-size: 12px;
  margin-top: 2px;
}
.song-time {
  color: #aaa;
  font-size: 10px;
  margin-top: 2px;
}
.play-icon {
  color: #f56c6c;
  font-size: 20px;
}
.artist-list {
  display: flex;
  overflow-x: auto;
  gap: 16px;
  margin-bottom: 24px;
  padding-bottom: 8px;
}
.artist-item {
  text-align: center;
  min-width: 80px;
}
.artist-avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  margin-bottom: 8px;
}
.artist-name {
  font-weight: bold;
  font-size: 12px;
  margin-bottom: 2px;
}
.artist-count {
  color: #888;
  font-size: 10px;
}
.discover-btn {
  width: 100%;
  margin-top: 16px;
}
</style>